import React from "react";

class FnClass extends React.Component {
  state = {
    name: "张三",
  };

  changeName = (e) => {
    this.setState({
      name: e,
    });
  };

  render() {
    return (
      <div>
        子组件内容：
        <Son
          name={this.state.name}
          a={<div>我是a插槽</div>}
          scopeSlot={(e) => {
            return (
              <div>
                scope插槽内容:{e.name} , {e.age}
              </div>
            );
          }}
          changeParentName={this.changeName}
        >
          <div>我是插槽</div>
          <div>我是插槽</div>
          <div>我是插槽</div>
          <div>我是插槽</div>
        </Son>
      </div>
    );
  }
}

class Son extends React.Component {
  state = {
    info: {
      name: "Son",
      age: 18,
    },
  };
  render() {
    return (
      <div>
        父组件名称 {this.props.name}
        <div>
          {this.props.a}
          children:
          {this.props.children}
          scopeSlot:
          {this.props.scopeSlot(this.state.info)}
          <div>
            <button onClick={this.props.changeParentName.bind(this,"son 修改的")}>改变父组件的name</button>
          </div>
        </div>
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <FnClass></FnClass>
    </div>
  );
}

export default App;
